@import '~components/constants.scss';

.workspaceListManager {
  & > .no-workspaces {
    line-height: 32px;
    height: 32px;
  }

  &.collapsed {
    & > .menu .text,
    .menu .more {
      display: none;
    }
    & > .menu .icon {
      margin-right: 0px;
    }
    & > .menu .icon .user_head {
      width: 25px;
      height: 25px;
      border-radius: 14px;
      border: 2px solid $white;
      box-sizing: border-box;

      &.email {
        color: #444;
        text-align: center;
        line-height: 22px;
        font-weight: bold;
      }
    }
    & > .menu {
      height: 24px;
      padding: 0px;
      display: inline-block;
      margin-bottom: 0px;
      vertical-align: top;
    }
    & > .menu:not(:first-child) {
      margin-left: -12px;
    }
  }

  &.mini {
    & > .menu .icon .user_head {
      width: 16px;
      height: 16px;
      margin-top: 4px;
      border-radius: var(--default-border-radius);

      &.email {
        color: #444;
        text-align: center;
        line-height: 14px;
        font-weight: bold;
      }
    }
  }

  /*&:not(.collapsed) {
    & > .menu {
      margin: 0 8px !important;
    }
  }*/

  & > .menu {
    display: flex;
    height: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
    box-sizing: border-box;

    .icon {
      margin-right: 8px;
      .user_head {
        width: 24px;
        height: 24px;
        border-radius: var(--default-border-radius-large);

        &.email {
          color: #444;
          text-align: center;
          line-height: 22px;
          font-weight: bold;
        }
      }
    }

    .text {
      flex: 1;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      line-height: 24px;
      font-size: 14px;
    }

    .emoji-container {
      margin-right: 5px;
      top: 1px;
      position: relative;
    }
    .more {
      height: 24px;
      .m-icon-small {
        margin: 3px;
        color: $black;
        cursor: pointer;
      }

      &:hover {
        .m-icon-small {
          &.remove {
            color: $red;
          }
          &.add {
            color: $primary;
          }
        }
      }
    }
  }

  .menu-text.add-user-input {
    margin-top: 8px;
    margin-bottom: 16px;
  }
}
